{{define "admin/app.html"}}
<!DOCTYPE html>
<html>

<head>
  {{template "layout/head.html" .}}
  <style type="text/css">
      td span{cursor: pointer}
  </style>
</head>

<body>
    <div class="wrapper">
        <div class="content-wrapper">
            <div class="container-fluid">
                <div class="row" style="padding-bottom: 5px;">
                    <div class="col-md-12">
                        <div class="box">
                            <div class="box-header">
                                <div class="row " style="margin-left: 0px;">
                                    <div class="col-md-6">
                                   
                                    </div>
                                    <div class="col-md-3">
            
                                    </div>
                                    <div class="col-md-3">
                                        <a class="btn btn-block btn-success" href="javascript:App_operat.updateOrAdd()">+ 添加应用</a>
                                    </div>
                                </div>
                                
                            </div><!-- /.box-header -->
                            <div class="box-body">
                                <div class="dataTables_wrapper form-inline dt-bootstrap">
                                    <div class="row" style="width: 100%;">
                                        <div class="col-md-12 appList">
                                            <table class="table table-bordered table-hover dataTable"> 
                                                <thead>
                                                    <tr>       
                                                        <td>应用ID</td> 
                                                        <td>应用名称</td> 
                                                        <td>状态</td> 
                                                        <td>描述</td>            
                                                        <td align="center">操作</td>           
                                                    </tr>        
                                                </thead>
                                                <tbody>

                                                </tbody>
                                                <tfoot style="display: none;">
                                                    <tr>
                                                        <td><span class="field" fieldName="pId"></span></td>
                                                        <td><span class="field" fieldName="pName"></span></td>
                                                        <td><span class="field" fieldName="pState"></span></td>
                                                        <td><span class="field" fieldName="pDesc"></span></td>
                                                       
                                                        <td align="center">
                                                            <span class="update btn btn-info"    >修改</span>
                                                            <span class="delete btn btn-danger"  >删除</span>
                                                        </td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                            <div class="pagination"></div>   
                                        </div>
                                    </div>
            
                                </div>
                            </div><!-- /.box-body -->
                        </div><!-- /.box -->
                    </div>
                </div>
           
          
          
                <div class="addOrUpdateAppDiv" style="display: none">
                    <form class="form-horizontal">
                        <div class="box-body">
                            <div class="form-inline row">
                                <label class="col-sm-3 control-label" >应用名称：</label>
                                <div class="col-sm-9">
                                    <input type="text"  class="form-control  control-block add_Name " disabled />
                                </div>
                            </div>
                            <div class="form-inline row">
                                <label class="col-sm-3 control-label" >状态：</label>
                                <div class="col-sm-9">
                                    <select  class="form-control  control-block  add_status" >
                                        <option value="1">正常</option>
                                        <option value="0">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-inline row">
                                <label class="col-sm-3 control-label" >描述：</label>
                                <div class="col-sm-9">
                                    <input type="text"  class="form-control  control-block  add_desc" />
                                </div>
                            </div>
                        </div>
                    </form>
          
                </div>
            </div>
        </div>
    </div>

  {{template "layout/foot.html" .}}
  {{template "layout/iframePageFoot.html" .}}

  <link href="{{.pageContentPath}}/static/plugins/bootstrap-table/bootstrap-table.min.css/" rel="stylesheet"/>
  <link href="{{.pageContentPath}}/static/plugins/bootstrap-table/bootstrap-table.min.js/" rel="stylesheet"/>
<script src="{{.pageContentPath}}/static/plugins/jquery/jquery.pagination.min.js"></script>
<script type="text/javascript">
    /**
     * Created by Eric.Zhang on 2021/05/15.
     */
    var App_operat = {
    }

    App_operat.pageInit=function(){
        App_operat.showList(1)
        // JoyDialog.showLoading();
    }
    App_operat.showList = function (pageIndex) {
        var pageSize=10;
        $('.appList tbody').empty()
        $('.appList .pagination').empty()
        $.ajax({
            url: page_content_path+'/api/system/authorize/app/getByPage',
            type:"get",
            data: { pageIndex: pageIndex, pageSize: pageSize, state:-1 },
            cache: false,
            success: function (data) {
                if (joyconn_layout.ValidataResult(data)) {
                    $.each(data.data,function(i,model){
                        App_operat.ShowItem(model);
                    })
                    
                    ShowPage($('.appList .pagination'), {
                        pno: pageIndex,
                        pagesize: pageSize,
                        allcount: data.allcount
                    }, function (pno) {
                        App_operat.showList(pno);
                    });

                }

            }
        });
    }

    App_operat.ShowItem = function (model) {
        var tr = $('.appList tbody tr[data-id="'+model.pId+'"]')
        if(!tr||tr.length==0){
            tr = $($('.appList tfoot').html()).attr("data-id",model.pId)
            $('.appList tbody').append(tr)
        }
        $(tr).find('.field').each(function(i,span){
            var fieldName = $(span).attr("fieldName")
            if(fieldName=='pState'){
                $(span).html(model[fieldName]==0?"禁用":"正常")
            }else{
                $(span).html(model[fieldName])
            }
        })
        $(tr).find('.btn.update').unbind('click').click(function(){
            App_operat.updateOrAdd(tr,model)
        })
        $(tr).find('.btn.delete').unbind('click').click(function(){
            App_operat.delete(tr,model)
        })
        

    }


    //添加、修改
    App_operat.updateOrAdd = function (sender, model) {
        var isAdd = model?false:true;
        var diaElement = $($(".addOrUpdateAppDiv").html());
        if(!isAdd){
            $(diaElement).find(".add_Name").val(model.pName);
            $(diaElement).find(".add_desc").val(model.pDesc);
            $(diaElement).find(".add_status").val(model.pState);
        }
        var dia = JoyDialog({
            titleText: (isAdd?"添加":"修改")+'应用',
            width: '40em',
            onClickConfirmBtn: function () {
                var postData ;
                if(isAdd){
                    postData={}
                }else{
                    postData = JSON.parse(JSON.stringify(model));
                }
                postData.pName= $.trim($(diaElement).find(".add_Name").val());
                postData.pDesc = $(diaElement).find(".add_desc").val();
                postData.pState = $(diaElement).find(".add_status").val()*1;
                postData.pIcon = '-';
                if (postData.pName.length == 0) {
                    JoyDialog({
                        type:"toast_error",
                        infoText: '应用名称不能为空！',
                    });
                    return false;
                }
                $.ajax({
                    url: page_content_path+ '/api/system/authorize/app/'+(isAdd?"add":"update"),
                    data:JSON.stringify(postData) ,
                    contentType:'application/json',
                    type: 'post',
                    success: function (data) {
                        if (!joyconn_layout.ValidataResult(data)) {
                            return;
                        }
                        if (data.code == 100001) {
                            dia.close();
                            JoyDialog({
                                type:"toast_success",
                                infoText:  '应用'+(isAdd?"添加":"修改")+'成功！',
                            });
                            App_operat.ShowItem(data.data)
                        }else if (data.code == 100111) {
                            JoyDialog({
                                type:"toast_warning",
                                infoText: data.msg,
                            });
                        }else {
                            JoyDialog({
                                type:"toast_error",
                                infoText:  '应用'+(isAdd?"添加":"修改")+'失败！',
                            });
                        }
                    }
                });
                return false
            },
            buttonTextConfirm:  (isAdd?"添加":"修改"),
            buttonTextCancel: '取消',
            content: diaElement.get(0)
        });
    }
    //删除APP
    App_operat.delete = function (sender,model) {
        var dia = JoyDialog({
            titleText: '提示',
            content: '要删除"'+model.pName+'"吗？<p style="color:red;">删除应用会导致该应用下已存在的权限角色等功能异常，请谨慎操作。</p>',
            buttonTextCancel:"取消",
            buttonTextConfirm: "删除",
            onClickConfirmBtn: ClickConfirmBtn
        });
        function ClickConfirmBtn(){
            $.ajax({
                    url: page_content_path+ '/api/system/authorize/app/deleteApp',
                    data: {appID:model.pId},
                    type: 'post',
                    success: function (data) {
                        if (!joyconn_layout.ValidataResult(data)) {
                            return;
                        }

                        if (data.code == 100001) {
                            JoyDialog({
                                type:"toast_success",
                                infoText: '删除成功！',
                            });
                            $(sender).remove()
                        } else {
                            JoyDialog({
                                type:"toast_error",
                                infoText: '删除失败！',
                            });
                        }
                    }
                });
        }
        
    }

    $(function () {

        App_operat.pageInit();
    });
</script>
</body>

</html>
{{end}}